import React,{useEffect} from 'react'
import {useDispatch,useSelector} from 'react-redux'
import * as api from '../api/index'
import withRouter from '../utile/withRouter'
import {Button } from 'react-vant'
import {style} from '../css/list.scss'

function DetailList({router}) {
  const dispatch=useDispatch();
  useEffect(()=>{
    //派送数据到仓库
    dispatch(api.get_dateList())

  },[dispatch])
  //获取仓库数据
  const dates= useSelector(state =>{
    //  let objs= window.localStorage.setItem('address',JSON.stringify(state.reducer.detailData))
    //   return JSON.parse(window.localStorage.getItem('detailData'));
    return state.reducer.detailData
  })
  console.log(dates)
  //添加数据
  const adds=()=>{
    console.log(router)
    router.navigate('/add')
  }
  //编辑数据
  
  const edits=(ids)=>{
    console.log(router)
    router.navigate(`/edit/${ids}`,{state:ids,replace:true})
  }
  return (
    <div className='lists'>
      {
        dates&& dates.length ? dates.map((item,index)=>{
          return <div className='divs' key={index}>
            <div>
            <p>{item.detail}</p>
            <p>{item.title}</p>
            <p>
              <span>{item.name}</span>
              <span>{item.phone}</span>
            </p>
            </div>
            <Button onClick={()=>{
        edits(item.id)
      }}>编辑</Button>
          </div>
        }):`暂无数据`
      }
      <Button className='adds' onClick={()=>{
        adds()
      }}>添加地址</Button>
    </div>
  )
}

export default withRouter(DetailList)